<template>
  <div ref="graphWrapRef" style="height:600px;position: relative;">
    <h2>我的第七个mxgraph</h2>
    <button @click="doExport2Console">在console中查看xml</button>
    <div ref="graphcontainerRef7" class="graphWrap2 graph-edit"></div>
    <button @click="doExport2Console2">在console中查看xml</button>
    <div ref="graphcontainerRef72" class="graphWrap2 graph-edit"></div>
  </div>
</template>

<script>
import _ from "lodash";
import mxgraph from '@/utils/mxgraph'
const { mxEvent, mxRubberband, mxGraph, mxConstants,
  mxGraphModel, mxClient, mxUtils, mxCodec, mxImage, mxCellOverlay, mxPoint } = mxgraph
const MxGraph = mxGraph
const MxRubberband = mxRubberband
const MxGraphModel = mxGraphModel
const MxCodec = mxCodec
const MxImage = mxImage
const MxCellOverlay = mxCellOverlay

export default {

  data() {
    return {
      graph: null,
      graph2: null
    }
  },
  mounted() {

    this.init()
    this.init2()

  },
  methods: {
    init() {
      // 
      var container = this.$refs.graphcontainerRef7
      mxEvent.disableContextMenu(container)
      const model = new MxGraphModel()
      const graph = new MxGraph(container, model)
      this.graph = graph
      var parent = graph.getDefaultParent()
      /****************************** */
      mxGraphModel.prototype.createId = function (cell) {
        console.log(cell, 'cell')
        if (cell.style && cell.style !== '')
          return cell.style + '_' + _.random(100)
        return _.random(100)
      }
      /****************************** */
      this.initStyle(graph)


      graph.getModel().beginUpdate()
      try {
        var start = graph.insertVertex(parent, null, 'start', 20, 20, 75, 75, 'start')
        var bill = graph.insertVertex(parent, null, 'bill', 180, 20, 75, 75, 'bill')
        var check = graph.insertVertex(parent, null, 'check', 350, 20, 75, 75, 'check')
        var end = graph.insertVertex(parent, null, 'end', 500, 20, 75, 75, 'end')
        graph.insertEdge(parent, null, '', start, bill)
        graph.insertEdge(parent, null, '', bill, check)
        graph.insertEdge(parent, null, '', check, end)
      } finally {
        // Updates the display
        graph.getModel().endUpdate()
      }
    },
    init2() {
      // 
      var container = this.$refs.graphcontainerRef72
      mxEvent.disableContextMenu(container)
      const model = new MxGraphModel()
      const graph = new MxGraph(container, model)
      this.graph2 = graph
      var parent = graph.getDefaultParent()
      /****************************** */
      // model.createId = function (cell) {
      //   return 'test' + '_' + _.random(100)
      // }
      /****************************** */
      this.initStyle(graph)


      graph.getModel().beginUpdate()
      try {
        var start = graph.insertVertex(parent, null, 'start', 20, 20, 75, 75,)
        var bill = graph.insertVertex(parent, null, 'bill', 180, 20, 75, 75,)
        var check = graph.insertVertex(parent, null, 'check', 350, 20, 75, 75,)
        var end = graph.insertVertex(parent, null, 'end', 500, 20, 75, 75,)
        graph.insertEdge(parent, null, '', start, bill)
        graph.insertEdge(parent, null, '', bill, check)
        graph.insertEdge(parent, null, '', check, end)
      } finally {
        // Updates the display
        graph.getModel().endUpdate()
      }
    },

    initStyle(graph) {
      var vStyle = graph.getStylesheet().getDefaultVertexStyle()

      var style = _.cloneDeep(vStyle)
      style[mxConstants.STYLE_FONTSIZE] = '12'
      style[mxConstants.STYLE_FONTCOLOR] = 'black'
      style[mxConstants.STYLE_STROKECOLOR] = 'black'
      style[mxConstants.STYLE_FILLCOLOR] = 'white'
      style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'
      style[mxConstants.STYLE_GRADIENT_DIRECTION] = mxConstants.DIRECTION_EAST
      style[mxConstants.STYLE_ROUNDED] = true
      style[mxConstants.STYLE_SHADOW] = true
      style[mxConstants.STYLE_FONTSTYLE] = 1
      style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL
      style[mxConstants.STYLE_STROKECOLOR] = 'white'
      style[mxConstants.STYLE_ROUNDED] = true
      style[mxConstants.STYLE_SHADOW] = false
      style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER
      style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP
      style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER
      style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP
      style[mxConstants.STYLE_IMAGE] = '/images/start.png'
      style[mxConstants.STYLE_IMAGE_WIDTH] = '40'
      style[mxConstants.STYLE_IMAGE_HEIGHT] = '40'
      style[mxConstants.STYLE_SPACING_TOP] = '50'
      style[mxConstants.STYLE_SPACING] = '8'
      const styleList = [
        { cguid: 'start', imgUrl: '/images/start.png' },
        { cguid: 'bill', imgUrl: '/images/bill.png' },
        { cguid: 'check', imgUrl: '/images/check.png' },
        { cguid: 'end', imgUrl: '/images/end.png' }
      ]
      for (var i = 0; i < styleList.length; i++) {
        const item = styleList[i]
        const newStyle = _.cloneDeep(style)
        newStyle[mxConstants.STYLE_IMAGE] = item.imgUrl
        graph.getStylesheet().putCellStyle(item.cguid, newStyle)
      }

    },
    doExport2Console() {
      var enc = new MxCodec()
      var node = enc.encode(this.graph.getModel())
      var mxgraphXml = mxUtils.getPrettyXml(node)
      console.log(mxgraphXml)
    },
    doExport2Console2() {
      var enc = new MxCodec()
      var node = enc.encode(this.graph2.getModel())
      var mxgraphXml = mxUtils.getPrettyXml(node)
      console.log(mxgraphXml)
    },


  },
}
</script>
<style scoped>
.graphWrap2 {
  position: relative;
  overflow: hidden;
  width: 821px;
  height: 241px;
  cursor: default;
  border: 1px solid grey;
}
.graph-edit {
  background: url("/images/grid.gif");
}
.graph-browse {
  background: none;
}
</style>


